<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>具名插槽</title>
        <style>
            body {
                padding: 0;
                margin: 0;
            }
            .base-layout {
                height: 100vh;
                width: 100vw;
            }
            .base-layout>header {
                height: 15vh;
                background: #88f;
            }
            .base-layout>main {
                height: 70vh;
                background: #f73;
            }
            .base-layout>footer {
                height: 15vh;
                background: #080;
            }

            .logo {
                display: inline-block;
                vertical-align: top;
                width: 160px;
                height: 15vh;
                background: #fff;
            }
        </style>
    </head>
    <div>

        <div id="application" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>
        
        <script>

            const BaseLayout = {
                template: `<div class="base-layout">
                              <header>
                                  <slot name="header">我是头</slot>
                              </header>
                              <main>
                                  <slot>我是中间的</slot>
                              </main>
                              <footer>
                                  <slot name="footer">我是脚</slot>
                              </footer>
                           </div>`,
            }

            const App = {
                components: {
                    BaseLayout
                },
                template: `<div class="wrapper">
                              <BaseLayout>
                                <template v-slot:header>
                                    <div class="logo">LOGO</div>
                                </template>
                                <template #default>
                                    <div class="main">MAIN</div>
                                </template>
                                <template #footer>
                                    <div class="footer">
                                        &copy; 2022 开发喵
                                    </div>
                                </template>
                              </BaseLayout>
                           </div>`
            }
            Vue.createApp(App).mount('#application');
        </script>
    </div>
</html>